<template>
	<div id="box" align="center">
		<div
			class="temp_plate print-wrap-80 print-wrap-normal"
			style="width: 80mm;font-size: 12px;
		    padding: 10px;
		    border: 1px solid #a5a5a5;
		    box-shadow: 2px 2px 2px #d3d3d3;text-align: left;"
		>
			<h2 style="text-align:center; ">{{ sellerInfo.name }}</h2>
			<h3 style="text-align:center; ">{{ orderInfo.diningTableNo }}</h3>

			<p class="panelone panelone1_2 panelone2">
				<span>单号:×××××××</span>
				<br />
				<span>人数:××人</span>
				<br />
				<span>开台时间:×××××××</span>
				<br />
			</p>
			<div>------------------------------------------------------</div>
			<el-table :data="foodVos" style="width: 100%;">
				<el-table-column prop="foodName" label="品名">
					<template slot-scope="scope">
						<div>
							<span v-show="scope.row.giveFoodStatus === 1" style="color: red;">赠</span>
							{{ scope.row.foodName }}
						</div>
						<div style="color: forestgreen;font-size: 0.5rem;">{{ scope.row.requirementName }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="数量">
					<template slot-scope="scope">
						{{ scope.row.foodNum }}
					</template>
				</el-table-column>
				<el-table-column prop="price" label="金额">
					<template slot-scope="scope">
						<div style="color: red;">￥{{ Number(scope.row.total) }}元</div>
					</template>
				</el-table-column>
			</el-table>
			<br>
			<div style="text-align: center;">
				<h3 style="color: red;size: 1.25rem;">合计:￥1000元</h3>
			</div>

			<p class="panelone panelone1_2 panelone2">
				<span>支付方式:</span>
				<span>扫码支付</span>
				<span>金额:</span>
				<span>198</span>
			</p>

			<div style="margin-top: 10px;" class="mf15mmwithbigsize"></div>

			<p class="panelone" style="margin-top: 10px;">
				<span>付款时间:</span>
				<span><span>2019年8月6日 13:13</span></span>
				<span>2019年8月6日 13:13</span>
			</p>
			<p class="panelone">
				<span>打印时间:</span>
				<span>5345345</span>
			</p>
			<p class="panelone">
				<span>联系电话:</span>
				<span>021-000000</span>
			</p>

			<p class="panelone">
				<span id="idTest">酒店地址:</span>
				<span>上海维也纳酒店</span>
			</p>

		</div>
		<br />
		<br />
		<el-button type="danger" @click="print">打印</el-button>
	</div>
</template>

<script>
import { getLodop } from '../../../../../utils/lodop.js';
export default {
	data() {
		return {
			sellerInfo: {},
			orderInfo: {},
			foodVos: [
				{
					id: 1,
					foodNo: '0001',
					sellerId: 6757942090161721000,
					foodName: '芒果拼盘',
					typeId: 11,
					shortCode: 'MGPP',
					sort: null,
					price: 120,
					memberPrice: 100,
					weixinMemberPrice: null,
					costPrice: 20,
					bommission: '',
					foodAlias: '',
					status: 1,
					norms: 1,
					flavorReamark: '',
					foodReamark: '',
					foodImg: 'http://oss.xqtinfo.cn/20210125/4ad75ebd56454e48a5e3288a8922feff.jpg',
					enableWeigh: 1,
					enableOpenReserve: 1,
					stock: null,
					minDiscount: 4,
					remark: '',
					foodSign: 1,
					index: 0,
					foodNum: 1,
					total: 120
				},
				{
					id: 7,
					foodNo: 'S0002',
					sellerId: 6757942090161721000,
					foodName: '水煮白菜',
					typeId: 8,
					shortCode: '',
					sort: null,
					price: 88,
					memberPrice: null,
					weixinMemberPrice: null,
					costPrice: null,
					bommission: '',
					foodAlias: '',
					status: 1,
					norms: 1,
					flavorReamark: '',
					foodReamark: '',
					foodImg: '',
					enableWeigh: null,
					enableOpenReserve: 1,
					stock: null,
					minDiscount: 9,
					remark: '',
					foodSign: 1,
					index: 1,
					foodNum: 1,
					total: 88
				},
				{
					id: 9,
					foodNo: 'D1123',
					sellerId: 6757942090161721000,
					foodName: '烧鸭',
					typeId: 8,
					shortCode: '',
					sort: null,
					price: 55,
					memberPrice: null,
					weixinMemberPrice: null,
					costPrice: null,
					bommission: '',
					foodAlias: '',
					status: 1,
					norms: 1,
					flavorReamark: '',
					foodReamark: '',
					foodImg: '',
					enableWeigh: null,
					enableOpenReserve: 1,
					stock: null,
					minDiscount: 9,
					remark: '',
					foodSign: 1,
					index: 6,
					foodNum: 1,
					total: 55
				}
			]
		};
	},

	created() {
		this.printPdf();
	},

	methods: {
		print() {
			this.printPdf();
		},

		printPdf() {
			this.sellerInfo = JSON.parse(sessionStorage.getItem('sellerInfo'));
			let LODOP = getLodop();
			if (LODOP != null && typeof LODOP.VERSION != 'undefined') {
				LODOP.PRINT_INIT('');
				LODOP.SET_PRINT_PAGESIZE(3, '58mm', '10mm', 'CreateCustomPage');
				LODOP.SET_PRINT_STYLE('FontSize', 15); // 设置打印字体
				LODOP.SET_PRINT_STYLE('Bold', 1); // 设置加粗
				LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Height:90%');
				LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width');

				var strHTML = document.getElementById('box').innerHTML;
				LODOP.ADD_PRINT_HTM(10, 10, '100%', '70%', strHTML);
				//LODOP.PRINT();//
				LODOP.PREVIEW();
			}
		}
	}
};
</script>

<style></style>
